---
title: 前端问答面试题
description: 问答式前端面试题 — 期望什么、要学习的概念以及 100 多个重要的练习题。
seo_title: 前端问答面试题 | 如何准备
seo_description: 准备问答式前端面试题的指南 — 期望什么、要学习的概念以及 100 多个重要的练习题。
social_title: 破解问答式面试 | 前端面试手册
---

问答题，也称为琐事题，是旨在测试你对该领域理解的简短封闭式问题。每个问题不应超过一两分钟的回答时间，但是，可以从你的答案中衍生出进一步的讨论。因此，对你给出的答案背后的概念有很好的理解非常重要，而不是盲目地记忆和重复。

## 示例

* [解释 CSS 盒子模型是什么。](/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
* [什么是 CSS 选择器特异性？](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
* [使用 `let`、`var` 或 `const` 创建的变量之间有什么区别？](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
* [解释 `this` 在 JavaScript 中的工作原理。](/questions/quiz/explain-how-this-works-in-javascript)

除了被问到前端基础知识（HTML、CSS、JavaScript）之外，如果你声称自己了解它们（在面试期间口头或面试官浏览你的简历时），你可能会被问到特定于框架的问题：

* X 技术解决了什么问题？
* X 技术的优缺点是什么？
* X 技术在幕后是如何工作的？
* X 技术与 Y 技术相比如何？

## 相关环节

通常不会有仅询问你问答题的面试环节。但是，面试官可能会在专注于其他形式（如编码和系统设计）的面试中向你提出问题。

* **招聘人员电话**: 由于问答题的封闭性质，即使是非技术人员（如招聘人员）也可以提出这些问题。值得庆幸的是，非工程师可能无法评估准确性，可能只是将你的答案中的关键词与交给他们的解决方案进行匹配。在最坏的情况下，你可能仍然可以通过回复听起来合理并包含正确关键词的内容来通过。
* **在线评估**: 虽然不常见，但你可能会被提供多项选择题，并且必须从中选择一个正确的答案。
* **编码环节**: 面试官可能会在任何编码开始之前问你几个问答题来热身。或者，当你正在编码和解释你的代码时，面试官可能希望深入研究你刚才提到的内容。因此，最好对你所说/所做的一切都有很好的理解。
* **系统设计环节**: 就像在编码环节一样，面试官可以就你所说的事情提出进一步的问题。
* **招聘经理环节**: 招聘经理环节通常不是技术性的，但他们可能会查看你的简历，并就你的简历中提到的技术/项目向你提问相关的问答题。

正如你所看到的，你可能会在几乎每一轮中被问到测验问题。时刻做好准备。

## 重要概念

| 领域 | 主题 |
| --- | --- |
| HTML | 语义 HTML、块级元素与内联元素、`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`、表单验证/提交 |
| CSS | 盒子模型、选择器、特异性、定位、单位、Flexbox、Grid、媒体查询 |
| JavaScript | 数据类型、作用域、闭包、`this`、变量声明（`var`、`let`、`const`）、数组方法、对象方法、Promise、类、Async/Await |
| DOM | DOM 创建/操作/遍历、事件冒泡/捕获、事件委托 |
| 运行时 API | `fetch()`、存储（`localStorage`、`sessionStorage`）、计时器（`setTimeout()`、`setInterval()`） |

## 提示

有很多概念需要涵盖，这可能会让人感到不知所措。好的一点是，无论你是否积极面试，很好地学习这些概念都会让你成为一个更好的前端工程师。

我们不建议死记硬背问答题的答案。最好真正理解每个问题的解决方案，并通过在项目中应用它们来获得一些实际经验，因为通过实践通常更容易学习。

## 练习题

GreatFrontEnd 包含了超过 100 个常见的测验问题，并为每个问题编写了详细的解决方案。

* [JavaScript 测验问题](/questions/javascript-interview-questions/quiz)
* [HTML 测验问题](/questions/html-interview-questions/quiz)
* [CSS 测验问题](/questions/css-interview-questions/quiz)
